<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
	<title th:text="${pluginInfo.pluginName}"></title>	
	<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="/static/common/common.css" />	
	<style type="text/css">
		.body-container{
			background-color: #fff;
    		margin: 20px;
		}
		
		.head{
			
		}
		.head .info .name{
			font-size: 20px !important;
		    font-weight: bold !important;
		    margin-right: 4px;
		    vertical-align: middle;
		}
		.content{
			border-radius: 4px;
		    /* border: 1px solid #E3E9ED; */
		    margin-bottom: 24px;
		    -webkit-box-shadow: none;
		    box-shadow: none;
		    background: #fff;
		    display: flex;
		}
		.user-container{
			min-height: calc(50vh);
		    border: 1px solid #dce3e8;
		     padding: 5px 10px 5px 10px;
		    /* overflow: auto; */
		    width: 280px;		
		    margin-left: 48px;
		}
		.user-info{
			background-color: #E3E9ED;
			height: 60px;
		}
		.user-status{
		    height: 10px;
		    width: 10px;
		    display: inline-table;
		    border-radius: 50%;
		}
		.user-list{
			margin: 10px;
		}
		.user-list .user-li{
			height: 72px;	
    		cursor: pointer;
		}
		.user-list .user-li .name{
			font-size: 18px;
		}	
		.user-list .user-li:hover{
			background-color: #E3E9ED;
		}
		.user-base{
			margin: 10px;
			height: 60px;
		}
		.user-base .name{
			font-size: 22px;
		}
		.user-base .sign{
			
		}
		.user-status-off{
			background-color: red;
		}
		.user-status-on{
			background-color: #4caf50;
		}
		.user-status-leave{
			background-color: #9e9e9e;
		}
		.group-container{
		    position: sticky;
		    top: 46px;
		    padding: 5px 10px 5px 10px;
		    width: 360px;
		    border: 1px solid #dce3e8;
		}
		.bottom{
		
		}
				
		.layim-chat-logs-main{
		    /* height: 280px;	 */		
		    padding: 15px 15px 5px;
		    overflow-x: hidden;
		    overflow-y: auto;	
		    /* border: 1px solid #ddd; */
		}
		.layim-chat-logs-main ul .layim-chat-mine{
		    text-align: right;
		    padding-left: 0;
		    padding-right: 60px;
		}
		.layim-chat-logs-main ul li{
		    position: relative;
		    font-size: 0;	
		    margin-bottom: 10px;
		    padding-left: 60px;
		    min-height: 68px;
		}
		.layim-chat-mine .layim-chat-user {
		    left: auto;
		    right: 3px;
		}
		.layim-chat-user {
		    position: absolute;
		    left: 3px;
		}
		.layim-chat-user img {
		    width: 40px;
		    height: 40px;
		    border-radius: 100%;
		}
		.layim-chat-mine .layim-chat-user cite {
		    left: auto;
		    right: 60px;
		    text-align: right;
		}
		.layim-chat-user cite {
		    position: absolute;
		    left: 60px;
		    top: -2px;
		    width: 500px;
		    line-height: 24px;
		    font-size: 12px;
		    white-space: nowrap;
		    color: #999;
		    text-align: left;
		    font-style: normal;
		}
		.layim-chat-mine .layim-chat-user cite i {
		    padding-left: 0;
		    padding-right: 15px;
		}
		.layim-chat-user cite i {
		    padding-left: 15px;
		    font-style: normal;
		}
		.layim-chat-text, .layim-chat-user {
		    display: inline-block;
		    *display: inline;
		    *zoom: 1;
		    vertical-align: top;
		    font-size: 14px;
		}
		.layim-chat-text {
		    position: relative;
		    line-height: 22px;
		    margin-top: 25px;
		    padding: 8px 15px;
		    background-color: #e2e2e2;
		    border-radius: 3px;
		    color: #333;
		    word-break: break-all;
		    max-width: 462px\9;
		}
		fieldset{	
			margin-top: 10px!important;
			margin-bottom: 10px!important;
		}	
		.meg-log-container{
			min-height: calc(50vh);
		    border: 1px solid #dce3e8;	
		    padding: 5px 10px 5px 10px;
		    /* overflow: auto; */
		    width: 280px;			
		    margin-left: 48px;
		}
		.meg-log-container .msg-logs-main{
			padding: 15px 15px 5px;
		    overflow-x: hidden;
		    overflow-y: auto;
		}
		.default-avatar{
			float: left;
    		margin-left: 10px;
    		border: 1px solid #dce3e8;
    		cursor: pointer;
    		margin-bottom: 10px;
		}
		.default-avatar img{
			height: 99px;
		    width: 99px;
		    border-radius: 100%;
		}
		.default-avatar.active{
			border: 1px solid red;	
		}
				
		.activity-container{
		    min-height: calc(50vh);
		    border: 1px solid #dce3e8;	
		    padding: 5px 10px 5px 10px;
		    /* overflow: auto; */
		    width: 450px;				
		    margin-left: 28px;
		}
	</style>	
</head>
<body class="body-container">
	<div class="head">
   		<div class="info">
   			<div class="name">
   				<p th:text="${pluginInfo.pluginName}"></p>
   			</div>
   			
   			<div class="count">
   				
   			</div>
   			
   		</div>
    </div>
    
    <!-- 推广信息位置 -->
    <div class="publicity">
    	<table class="layui-table" style="width: 80%;">
		  <thead>
		    <tr>
		      <th>作者</th>
		      <th>微信二维码</th>
		      <th>码云</th>
		      <th>邮箱</th>
		      <th>微信号</th>
		      <th>说明</th>
		    </tr> 
		  </thead>
		  <tbody>
		    <tr>	
		      <td>bzm-八爪猫 【支持技术支持 和 解决方案】</td>
		      <td>	
		      	<img style="height: 64px;" class="picture-preview-btn" alt="" src="http://www.file.bzmhm.com/im/bzm/bzm_wx.jpg">
		      </td>
		      <td>		
		      	<div style="margin-bottom: 5px;">码云：<a href="https://gitee.com/yyzhm" target="_blank">https://gitee.com/yyzhm</a></div>
		      </td>
		       <td>		
		      	<div style="margin-bottom: 5px;">邮箱：hm68001531@163.com</div>
		      </td>
		      <td>		
		      	<div style="margin-bottom: 5px;">微信：bzm9527168 </div>
		      </td>
		      <td>		
		      	<div style="margin-bottom: 5px;">欢迎大家提意见 </div>
		      </td>
		    </tr>
		    
		  </tbody>
		</table>
    	
    </div>
    	
    <div class="content" style="height: 460px;">	
		<!-- 群聊列表 -->
		<div class="group-container">
			<p>群聊列表</p>
			
			<div style="margin: 5px 0px;">
				<form class="layui-form" action="">		
					<div class="layui-form-item layim-chat-logs-main msg-group-key" style="margin-bottom: 5px;height: 282px;">
						<ul class="im-chat-msg-logs-to-group msg-group-val-20221010">
								
						</ul>
					</div>
					<div class="layui-form-item layui-form-text">
						<div class="layui-input-block" style="margin-left: 0px;">
							<textarea style="resize:none;min-height: 70px;" name="sedGroupMsg" placeholder="请输入发送内容" class="layui-textarea"></textarea>
						</div>
					</div>
			
					<button type="button" class="layui-btn layui-btn-normal layui-btn-sm send-group-btn" style="float: right;background-color: #00c1de;">发送群信息</button>
			
				</form>
			</div>
			
		</div>
		
		
		<!-- 消息记录 -->
    	<div class="meg-log-container">
    		<p style="margin-left: 10px;position: absolute;">消息记录</p>
    		
    		<div style="margin: 5px 0px;">	
				<form class="layui-form" action="">		
					<div class="layui-form-item layim-chat-logs-main msg-logs-key" style="margin-bottom: 5px;height: 440px;margin-top: 25px;">
						<ul class="im-chat-msg-logs">
							
						</ul>
					</div>
					
				</form>
			</div>
    		
    	</div>
		
		<!-- 用户列表 -->
    	<div class="user-container">			
    		<button type="button" class="layui-btn layui-btn-normal im-login-btn  layui-btn-sm" style="margin-left: 10px;">IM-登录</button>				
			<button type="button" class="layui-btn layui-btn-danger im-login-out-btn  layui-btn-sm" style="display: none;margin-left: 10px;">Im-退出</button>		
    				
    		<p class="im-connect-status" style="font-size: 16px; padding: 5px 0px;display: inline-block;margin-left: 10px;border: 1px solid #dce3e8;">im未连接...</p>	
			
    		<!-- 当前用户  -->
    		<!-- <p style="background-color: #ddd;">当前用户</p> -->
    		<div class="user-info">
    			<div class="user-base">
    				<p style="margin-bottom: 4px;">	
	    				<span class="name"></span>
	    				<span class="current-status user-status"></span>
	    			</p>	
	    			<p class="sign"></p>
    			</div>
    		</div>
    				
    		<!-- 用户列表 -->			
    		<p style="background-color: #ddd;margin-top: 20px;height: 30px; line-height: 30px; text-align: center;color: #00bcd4;">好友列表</p>
    		<div class="user-list" style="height: 284px;">		
    			<ul class="user-ul" style="overflow: auto; height: 264px;">
    				
    				
    			</ul>
    		</div>
    	</div>
    
    	
    	<!-- 活动消息 -->	
    	<div class="activity-container">	
    		<p style="margin-left: 10px;position: absolute;">八爪猫-活动快讯</p>
    		<div style="margin-top: 40px;">		
				<ul class="news_list">
					<!-- <li>	
						<a href="https://url.cn/TwkNRsAr" target="_blank">1、【腾讯云】多款云产品1折起，买云服务器送免费机器，最长免费续3个月</a>
					</li> -->
				</ul>
			</div>
    	</div>
    	
    </div>
		
	<div class="bottom">
			
	</div>	
	
	<div class="echarts" style="display: flex;margin-bottom: 10px;">
    	
    	<!-- im-register 用户注册数量 查询近一个月，每天新增用户 -->		
		<div id="im-user-line-echarts" style="width: 480px;height:220px;margin-left: 10px;"></div>
		
		<!-- im-register 注册中心 -->	
		<div id="im-register-pie-echarts" style="width: 480px;height:220px;margin-left: 10px;"></div>
					
		<!-- im-msg 发送消息数量，查询最近一个月，每天发送消息 ，群消息 和 用户消息 -->		
    	<div id="im-msg-bar-echarts" style="width: 480px;height:220px;margin-left: 10px;"></div>
    </div>
			
	
	<script src="/static/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="/static/layui/layui.all.js" type="text/javascript"></script>
	<script src="/static/plugins/echarts/echarts.min.js" type="text/javascript"></script>
	<script src="/static/common/common.js" type="text/javascript"></script>
	<script src="/static/plugins/bzm-im/im_common.js" type="text/javascript"></script>
	<script src="/static/plugins/bzm-im/im_echarts.js" type="text/javascript"></script>
	<script type="text/javascript" th:inline="none">
	var imChatUser = null;		
	var userAvatarList = [];
	// 用户列表缓存
	var all_user_list_cache = [];
	var wsWebSocketUrl = null;
	
	// 好友消息记录缓存
	var im_user_msg_cache = [];
	
	// 群聊消息记录缓存	
	var im_group_msg_cache = [];
	
	
	$(document).ready(function() {
		
		// 查询用户列表
		selectAllUserList();
		
		selectImRegisterService();
		
		selectImRegisterList();
		
		//initImUserLineOption();
			
		//initImMsgBarOption();
		
		selectImUserAvatarList();
		
		selectCountUserAddList();
		
		selectCountMsgAddList();
		
		selectGroupMsgList("20221010");
		
		// 查询活动	
		selectActivityList();
		
	})
	
	// 查询活动
	function selectActivityList(){
		$.ajax({	
			url: '/bzm/plugin/activity/list',  	// 请求的url地址	
			dataType: 'json', 					// 返回格式为json	
			data: {},	
			type: 'get', 						// 请求方式		
			async: false,	
			success: function (res) {
				var html = "";
				var _count = 1;
				if(res.code==200){
					for (var i = 0; i < res.data.length; i++) {
						var _itemp = res.data[i];
						html+='<li>';	
						html+='<a href="'+_itemp.activityUrl+'" target="_blank">'+_count+"、"+_itemp.activityName+'</a>';
						html+='</li>';
						_count ++;	
					}	
				}else{	
					layer.msg(res.msg);	
				}		
				$(".news_list").append(html);				
			},
			error: function () {

			}
		}); 
	}
	
	
	
	// 用户点击事件  user-li
	$(document).on('click', '.user-list .user-li', function () {
		var friendId = $(this).attr("friend-id");		
		var friendName = $(this).attr("friend-name");		
			
		openFriendImMsgPopup(friendId,friendName);
	});
	
	// 打开好友弹窗
	function openFriendImMsgPopup(friendId,friendName){
		// 打开好友 
		if(imChatUser==null){
			imLogin();
			return false;
		}
			
		// 打开聊天弹窗
		var index = layer.open({									
			type: 1 ,				  		// 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层
			title: imChatUser.nickname + " to -> "+friendName,				// title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
			area: ['500px', '680px'],		// 默认：'auto' 	自适应
			//shade: 1,				  		// 要想显示遮罩需要将这个  注释							
			skin: 'layui-layer-lan',  		// layer内置的skin有：layui-layer-lan layui-layer-molv
			//maxmin: true,
			//resize:true,	
			shade: 0,		
			id: friendId, //设定一个id，防止重复弹出
			offset: 
			 [Math.random()*($(window).height()-300)
		     ,Math.random()*($(window).width()-390)] ,//为了演示，随机坐标
			shadeClose:false,					
			content:initFriendImHtml(friendId),					
			btn: ['发送','取消'], 	
			btn1: function(){			
				// 拿到消息
				var msg = $(".sed-msg-friend-id-"+friendId).val()
				IM_CHAT.chatSendMsg(imChatUser,friendId,msg);
			},
			btn2: function(){				
				layer.close(index);		
			},
			cancel: function(){ 

			},		
			success: function(layers){		
				var form = layui.form;
				layers.addClass('layui-form');	
				layers.find('.layui-layer-btn0').attr('lay-filter', 'addBtnFrom').attr('lay-submit', '');//将按钮弄成能提交的
				form.render(); 	
				
				// 查询好友聊天信息
				selectFriendMsgList(imChatUser,friendId)
				form.on('submit(addBtnFrom)', function (data) {	
					
					return false;
				});	

			}	
		});
	}
	
	// 好友聊天弹窗 
	function initFriendImHtml(friendId){
		var html = "";	
		html+='<div style="margin: 20px 10px;">';	
		html+='<form class="layui-form" action="">';
		
		// 聊天记录			
		html+='<div class="layui-form-item layim-chat-logs-main im-chat-msg-friend-key-'+friendId+'" style="height: 350px;">';	
		html+='<ul class="im-chat-msg-friend-val-'+friendId+'" open="true">';	
		
		html+='</ul>';
		html+='</div>';
		
		// 发送内容	
		html+='<div class="layui-form-item layui-form-text">';
		html+='<div class="layui-input-block" style="margin-left: 0px;">';
		html+='<textarea style="resize:none;" class="layui-textarea sed-msg-friend-id-'+friendId+'" name="sedMsg" maxlength="88" placeholder="请输入发送内容"></textarea>';
		html+='</div>';
		html+='</div>';	
						
		html+='</form>';
		html+='</div>';
		return html;
	}
	
	// 拿到用户最新信息
	function initFriendMsgHtml(currentUser,friendMsg,receiveId){
		var _html = "";
		var _currentUserId = currentUser.userId;
			
		for (var i = 0; i < friendMsg.length; i++) {
			var _msgObj = friendMsg[i];
			
			var _sendId = _msgObj.sendId;
			var _receiveId = _msgObj.receiveId;
			var _msgContent = _msgObj.msgContent;
			var _sendTime = _msgObj.sendTime;
			var _msgType = _msgObj.msgType;
			var _sendAvatar = _msgObj.sendAvatar;
			var _sendName = _msgObj.sendName;
			if(_currentUserId==_sendId){
				// 自己发送
				_html+='<li class="layim-chat-mine"> ';
				_html+='<div class="layim-chat-user">';
				_html+='<img src="'+currentUser.headImgUrl+'">';
				_html+='<cite><i>'+commonDateFormat(_sendTime,"yyyy-MM-dd hh:mm:ss")+'</i>'+currentUser.nickname+'</cite>';
				_html+='</div>';	
				_html+='<div class="layim-chat-text" style="background-color: #00c1de;color: #efeff4;">'+_msgContent+'</div>';
				_html+='</li>';	
			}else{
				// 
				_html+='<li>';	
				_html+='<div class="layim-chat-user">';	
				_html+='<img src="'+_sendAvatar+'">';
				_html+='<cite>'+_sendName+'<i>'+commonDateFormat(_sendTime,"yyyy-MM-dd hh:mm:ss")+'</i></cite>';
				_html+='</div>';		
				_html+='<div class="layim-chat-text">'+_msgContent+'</div>';
				_html+='</li>';	
			}	
		}				
		var _appendKey = ".im-chat-msg-friend-val-"+receiveId;
		var _scrollTopKey = ".im-chat-msg-friend-key-"+receiveId;	
		$(_appendKey).append(_html);				
		$(_scrollTopKey).scrollTop($(_scrollTopKey)[0].scrollHeight);
	}
	
	// 好友消息	
	function selectFriendMsgList(currentUser,rId){
		$.ajax({
			url: '/bzm/plugin/friend/msg/list',  	// 请求的url地址	
			dataType: 'json', 					// 返回格式为json	
			data: {'sendId':currentUser.userId,'receiveId':rId},	
			type: 'get', 						// 请求方式		
			async: false,	
			success: function (res) {
				if(res.code==200){
					
					initFriendMsgHtml(currentUser,res.data,rId);
				}else{	
					layer.msg(res.msg);	
				}	
			},
			error: function () {

			}
		}); 
	}
	
	// 登陆成功后显示群聊信息
	function initGroupMsgHtml(currentUser,groupMsg,groupId){
		var _html = "";		
		for (var i = 0; i < groupMsg.length; i++) {
			var _msgObj = groupMsg[i];
			
			var _sendId = _msgObj.sendId;
			var _receiveId = _msgObj.receiveId;
			var _msgContent = _msgObj.msgContent;
			var _sendTime = _msgObj.sendTime;
			var _msgType = _msgObj.msgType;
			var _sendAvatar = _msgObj.sendAvatar;
			var _sendName = _msgObj.sendName;
			if(currentUser != null){
				var _currentUserId = currentUser.userId;
				if(_currentUserId==_sendId){
				// 自己发送
				_html+='<li class="layim-chat-mine"> ';
				_html+='<div class="layim-chat-user">';
				_html+='<img src="'+currentUser.headImgUrl+'">';
				_html+='<cite><i>'+commonDateFormat(_sendTime,"yyyy-MM-dd hh:mm:ss")+'</i>'+currentUser.nickname+'</cite>';
				_html+='</div>';	
				_html+='<div class="layim-chat-text" style="background-color: #00c1de;color: #efeff4;">'+_msgContent+'</div>';
				_html+='</li>';	
				}else{
					// 
					_html+='<li>';	
					_html+='<div class="layim-chat-user">';	
					_html+='<img src="'+_sendAvatar+'">';
					_html+='<cite>'+_sendName+'<i>'+commonDateFormat(_sendTime,"yyyy-MM-dd hh:mm:ss")+'</i></cite>';
					_html+='</div>';		
					_html+='<div class="layim-chat-text">'+_msgContent+'</div>';
					_html+='</li>';	
				}
			}else{
				// 
				_html+='<li>';	
				_html+='<div class="layim-chat-user">';	
				_html+='<img src="'+_sendAvatar+'">';
				_html+='<cite>'+_sendName+'<i>'+commonDateFormat(_sendTime,"yyyy-MM-dd hh:mm:ss")+'</i></cite>';
				_html+='</div>';		
				_html+='<div class="layim-chat-text">'+_msgContent+'</div>';
				_html+='</li>';	
			}	
		}			
			
		var _appendKey = ".msg-group-key .msg-group-val-"+groupId;
		var _scrollTopKey = ".layim-chat-logs-main.msg-group-key";	
		$(_appendKey).append(_html);				
		$(_scrollTopKey).scrollTop($(_scrollTopKey)[0].scrollHeight);
	}
	
	// 群消息
	function selectGroupMsgList(groupId){
		$.ajax({
			url: '/bzm/plugin/group/msg/list',  	// 请求的url地址	
			dataType: 'json', 					// 返回格式为json	
			data: {'groupId':groupId},	
			type: 'get', 						// 请求方式		
			async: false,	
			success: function (res) {
				if(res.code==200){
					im_group_msg_cache = res.data;
					initGroupMsgHtml(imChatUser,im_group_msg_cache,groupId);
				}else{	
					layer.msg(res.msg);	
				}	
			},
			error: function () {

			}
		}); 
	}
	
	// 用户新增趋势
	function selectCountUserAddList(){
		$.ajax({
			url: '/bzm/plugin/count/user/add',  	// 请求的url地址	
			dataType: 'json', 					// 返回格式为json	
			data: {},	
			type: 'get', 						// 请求方式		
			async: false,	
			success: function (res) {
				if(res.code==200){
					initImUserLineOption(res.data);
				}else{	
					layer.msg(res.msg);	
				}	
			},
			error: function () {

			}
		}); 
	}
	
	// 消息发送趋势
	function selectCountMsgAddList(){
		$.ajax({
			url: '/bzm/plugin/msg/msg/add',  	// 请求的url地址	
			dataType: 'json', 					// 返回格式为json	
			data: {},	
			type: 'get', 						// 请求方式		
			async: false,	
			success: function (res) {
				if(res.code==200){
					initImMsgBarOption(res.data);
				}else{	
					layer.msg(res.msg);	
				}	
			},
			error: function () {

			}
		}); 
	}
	
	// im 用户头像 
	function selectImUserAvatarList(){
		$.ajax({
			url: '/bzm/plugin/im/user/avatar',  	// 请求的url地址	
			dataType: 'json', 					// 返回格式为json	
			data: {},	
			type: 'get', 						// 请求方式		
			async: false,	
			success: function (res) {
				if(res.code==200){
					userAvatarList = res.data;
				}else{	
					layer.msg(res.msg);	
				}	
			},
			error: function () {

			}
		}); 
	}
	
	// 获得im可用服务
	function selectImRegisterService(){
		$.ajax({
			url: '/bzm/plugin/im/register/service',  	// 请求的url地址	
			dataType: 'json', 					// 返回格式为json	
			data: {},	
			type: 'get', 						// 请求方式		
			async: false,	
			success: function (res) {
				if(res.code==200){
					wsWebSocketUrl = "ws://"+res.data.ip+":"+res.data.imPort+"/ws";
				}else{	
					layer.msg(res.msg);	
				}	
			},
			error: function () {

			}
		}); 
	}
	
	
	// 获得im服务列表
	function selectImRegisterList(){
		$.ajax({
			url: '/bzm/plugin/im/register/list',  	// 请求的url地址	
			dataType: 'json', 					// 返回格式为json	
			data: {},	
			type: 'get', 						// 请求方式		
			async: false,	
			success: function (res) {
				if(res.code==200){
					console.log(res);
					initImRegisterPieOption(res.data);
				}else{	
					layer.msg(res.msg);	
				}	
			},
			error: function () {

			}
		}); 
	}
	
	
	// 获得用户列表
	function selectAllUserList(){
		all_user_list_cache = [];
		$.ajax({
			url: '/bzm/plugin/user/list',  	// 请求的url地址	
			dataType: 'json', 					// 返回格式为json	
			data: {},	
			type: 'get', 						// 请求方式		
			async: false,	
			success: function (res) {
				if(res.code==200){
					all_user_list_cache = res.data;
					
				}else{	
					layer.msg(res.msg);	
				}	
				initFriendUserList();
			},
			error: function () {

			}
		}); 
	}
	
	// user-ul 用户列表
	function initFriendUserList(){
		var html = "";
		if(all_user_list_cache.length > 0){
			for (var i = 0; i < all_user_list_cache.length; i++) {
				var obj = all_user_list_cache[i];	
				if(imChatUser!=null){
					if(imChatUser.userId==obj.userId){
						continue;
					}
				}
				html += '<li class="user-li" friend-id="'+obj.userId+'"  friend-name="'+obj.nickname+'">';
				html += '<p>';
				html += '<span class="name">'+obj.nickname+'</span>';
				var userStatusCss = getUserStatusCss(obj.loginStatus);
				html += '<span class="user-status '+userStatusCss+'"></span>';
				
				html += '<img style="height: 34px; width: 34px;border-radius: 100%;margin-left: 5px;" src="'+obj.headImgUrl+'">';
				html += '</p>';	
					
				html += '<p>';
				html += '<span class="name" style="margin-right: 10px;font-size: 13px;">'+obj.username+'</span>';
				html += '<span class="">'+commonDateFormat(obj.loginTime,"yyyy-MM-dd")+'</span>';
				html += '</p>';
				html += '</li>';
			}		
		}
		$(".user-list .user-ul").empty().append(html);
	}
	
	
	// 登录
	$(document).on('click', '.im-login-btn', function () {	
		imLogin();
	});
	
	function imLogin(){
		
		var html = "";
		html+='<div style="margin: 20px 10px;">';	
		html+='<form class="layui-form" action="">';
		
		html+='<div class="layui-form-item">';
		html+='<div class="layui-inline">';
		html+='<label class="layui-form-label"></label>';
		html+='<div class="layui-input-inline">';	
		//html+='<button type="button" class="layui-btn layui-btn layui-btn-normal">请输入手机号和昵称进行登录</button>'
		html+='</div>';
		html+='</div>';
		html+='</div>';
		
		html+='<div class="layui-form-item">';
		/* html+='<div class="layui-inline">'; */
		html+='<label class="layui-form-label zdy-required">you手机</label>';
		html+='<div class="layui-input-inline">';	
		html+='<input type="text" name="phone" maxlength="11" autocomplete="off" class="layui-input">';
		html+='</div>';	
		/* html+='</div>'; */
		html+='<div class="layui-form-mid layui-word-aux">手机号【有就登录，没有就注册】</div>';
		html+='</div>';
				
		html+='<div class="layui-form-item">';
		/* html+='<div class="layui-inline">';	 */
		html+='<label class="layui-form-label">you昵称</label>';		
		html+='<div class="layui-input-inline">';	
		html+='<input type="text" name="nickname" maxlength="18" autocomplete="off" class="layui-input" value="">';
		html+='</div>';
		/* html+='</div>'; */
		html+='<div class="layui-form-mid layui-word-aux">you昵称【有就更新，没有就使用默认】</div>';
		html+='</div>';
		
		
		html+='<div class="layui-form-item login-item">';
		/* html+='<div class="layui-inline">';	 */
		html+='<label class="layui-form-label">select头像</label>';		
		html+='<div class="layui-input-inline" style="width: 80%;">';
		
		
		// userAvatarList
		for (var i = 0; i < userAvatarList.length; i++) {
			var obji = userAvatarList[i];
			if(i==0){
				html+='<div class="default-avatar active" avatar='+obji.fileNumber+'><img src="'+obji.fileServiceUrl+obji.fileUrl+'"></div>';
			}else{
				html+='<div class="default-avatar" avatar='+obji.fileNumber+'><img src="'+obji.fileServiceUrl+obji.fileUrl+'"></div>';
			}
		}
		
		html+='</div>';
		/* html+='</div>'; */
		html+='</div>';
		
		html+='</form>';
		html+='</div>';
				
		var index = layer.open({							
			type: 1 ,				  		// 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层
			title: "im-登录",					// title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
			area: ['800px', '650px'],		// 默认：'auto' 	自适应
			//shade: 1,				  		// 要想显示遮罩需要将这个  注释							
			skin: 'layui-layer-lan',  		// layer内置的skin有：layui-layer-lan layui-layer-molv
			maxmin: true,
			resize:false,		
			shadeClose:false,					
			content:html,					
			btn: ['立即登录','取消'], 	
			btn1: function(){			

			},
			btn2: function(){				
				layer.close(index);		
			},
			cancel: function(){ 
				
			},		
			success: function(layers){		
				var form = layui.form;
				layers.addClass('layui-form');	
				//	将按钮弄成能提交的
				layers.find('.layui-layer-btn0').attr('lay-filter', 'imLoginFrom').attr('lay-submit', '');
									
				$(document).on('click', '.login-item .default-avatar', function () {
					$(this).addClass("active").siblings().removeClass("active");
				})
				
				form.render();	 		
				form.on('submit(imLoginFrom)', function (data) {	
					var avatarVal = $(".login-item .default-avatar.active").attr("avatar");
					
					data.field.avatar = avatarVal;
					$.ajax({
						url: '/bzm/plugin/login',  				// 请求的url地址	
						dataType: 'json', 					// 返回格式为json	
						data: data.field,	
						type: 'post', 						// 请求方式		
						async: false,	
						success: function (res) {
							if(res.code==200){
								// 缓存用户信息	
								imChatUser = res.data;
								// 初始化连接	
								IM_CHAT.init(imChatUser);
								// 登录成功  隐藏登录按钮	
								$(".im-login-btn").hide();	
								$(".im-login-out-btn").show();	
								// im-friend-container-li	
								$(".im-friend-container-li").show();	
								layer.msg("登录成功");	
								//selectMyFriendList(imChatUser.user.id);
								
								initUserBase(imChatUser);
										
								selectGroupMsgList("20221010");
								
								layer.close(index)
							}else{
								layer.msg(res.msg);
							}
						},
						error: function () {

						}
					}); 
					return false;
				});	

			}	
		});
	}
	
	// 初始化 用户基本信息
	function initUserBase(userObj){
		if(userObj!=null){
			$(".user-base .name").text(userObj.nickname);	
			var userStatusCss = getUserStatusCss(userObj.loginStatus);
			$(".user-base .current-status").addClass(userStatusCss);
			$(".user-base .sign").text(userObj.phone);	
		}else{
			$(".user-base .name").text("");	
			$(".user-base .current-status").removeClass().addClass("current-status");;
			$(".user-base .sign").text("");
		}
		initFriendUserList();
	}
	
	// 获得用户在线状态样式
	function getUserStatusCss(loginStatus){
		var css = "user-status";
		if(loginStatus==2){
			css = 'user-status-off';
		}else if(loginStatus==1){
			css = 'user-status-on';
		}else if(loginStatus==3){
			css = 'user-status-leave';
		}
		return css;
	}
	
	// 退出im
	$(document).on('click', '.im-login-out-btn', function () {	
		layer.confirm('确定退出im吗？', {
			btn: ['确定', '取消']		//按钮
		}, function (index) {
			layer.close(index);	
			//window.location.href="/imChat/showImChatInfo";
			//layer.msg("功能待开发中....");	
			$.ajax({
				url: '/bzm/plugin/login/out',  				// 请求的url地址	
				dataType: 'json', 					// 返回格式为json	
				data: {'userId':imChatUser.userId},	
				type: 'post', 						// 请求方式		
				async: false,	
				success: function (res) {
					if(res.code==200){
						initUserBase(null);
						layer.close(index)
					}else{
						layer.msg(res.msg);
					}
				},
				error: function () {

				}
			}); 
			
		});
	});
	
	

	// layui-btn-sm send-group-btn
	$(document).on('click', '.layui-btn-sm.send-group-btn', function () {	
		if(imChatUser==null){
			imLogin();
			return false;
		}
		
		// sedGroupMsg	
		var msgVal = $(".group-container textarea[name='sedGroupMsg']").val();
		var groupId = "20221010";	
		IM_CHAT.chatSendGroupMsg(imChatUser,groupId,msgVal);
		$(".group-container textarea[name='sedGroupMsg']").val("");
	});
	    	
	</script>
</body>
</html>